<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width: 100%;
				height: 200px;
				/* 边框和背景颜色：检测元素是否选中 */
				background-color: #362d1c;
				bor der:1px solid red ;
				/* id选择器和class选择器区别 
				id用于页面结构搭建，class位于id中结构中进行微调部分
				*/
			}
			#footer{
				width: 100%;
				height: 200px;
				/* 边框和背景颜色：检测元素是否选中 */
				background-color: #ba0e11;
				bor der:1px solid red ;
				position: relative;
				top: 553px;
				}
		</style>
	</head>
	<body>
		<!-- 选择器：抓取页面元素
		1.元素选择器：以元素名称作为选择器，抓取页面元素
		2.伪类选择器：在其他选择器上附加效果     :hover鼠标悬停时
		                                      :before 在元素前生成文本，结合content属
		                                    :aftre 在元素前生成文本，结合content属
		3.类选择器:以1个别名或者多个别名机取页面元素	
		4.通用选择器:抓取页面上所有的元素，规范页面效果【盒模型:内外边距、字体】	
		5.id选择器:以别名形式抓取页面元素【唯一性:用于页面结构搭建、切片】
		语法:  html 前标记 id=“别名"
		      css  #别名
		-->
		<div id="header">页头</div>
				 <!-- 设置页主体 body，页尾 footer，宽度100%，高度、颜色自定-->
				 <div id="footer">页尾</div>
		</body>
</html>